<template>
  <header>全国各战区图</header>

  <main>
    <div class="left">
      <div class="left-top"></div>
      <div class="left-bottom"></div>
    </div>
    <div class="middle">
      <div class="middle-top"></div>
      <div class="middle-bottom"></div>
    </div>
    <div class="right">
      <div class="right-top"></div>
      <div class="right-bottom"></div>
    </div>
  </main>
</template>

<style lang="less" scoped>
// 字体一般用vmin或者vmax作为单位
// vmin表示屏幕的宽和高里面短的那一条
// vmax表示屏幕的宽和高里面长的那一条
header {
  width: 100%;
  height: 10vh;
  border: 2px solid #000;
  font-size: 2vmin;
  text-align: center;
  line-height: 10vh;
}

main {
  width: 100%;
  height: 90vh;
  border: 2px solid #000;
  display: flex;

  .left {
    width: 30vw;
    height: 90vh;
    border: 2px solid #000;

    .left-top {
      width: 100%;
      height: 45vh;
      border: 2px solid #000;
    }
    .left-bottom {
      width: 100%;
      height: 45vh;
      border: 2px solid #000;
    }
  }
  .middle {
    width: 40vw;
    height: 90vh;
    border: 2px solid #000;

    .middle-top {
      width: 100%;
      height: 60vh;
      border: 2px solid #000;
    }
    .middle-bottom {
      width: 100%;
      height: 30vh;
      border: 2px solid #000;
    }
  }
  .right {
    width: 30vw;
    height: 90vh;
    border: 2px solid #000;

    .right-top {
      width: 100%;
      height: 45vh;
      border: 2px solid #000;
    }
    .right-bottom {
      width: 100%;
      height: 45vh;
      border: 2px solid #000;
    }
  }
}
</style>
